<template>
    <div>
        <div style="display: flex">
            <el-select
                    v-model="searchCourseId"
                    placeholder="请选择课程名称"
                    clearable
                    style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px"
            >
                <el-option
                        v-for="item in courseOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                ></el-option>
            </el-select>
            <!--对应按键-->
            <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
            </el-button>
            <el-button type="success" style="" @click="importData">导入</el-button>
            <!--<el-button type="success" style="" @click="exportData">导出</el-button>-->
        </div>

        <!-- 表格 -->
        <div>
            <el-table :data="tableData" :row-style="{ height: '77px' }" border
                      style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
                <el-table-column fixed prop="courseName" label="课程名称" align="center" min-width="150"/>
                <el-table-column prop="questionType" label="题型" align="center" min-width="120">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.questionType === '1'">单选题</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.questionType === '2'">多选题</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.questionType === '3'">判断题</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.questionType === '4'">填空题</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="questionText" label="题目内容" align="center" min-width="300" show-overflow-tooltip/>
                <el-table-column fixed="right" label="操作" align="center" width="270" class-name="fixed-column">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" icon="View" @click="goToAbout(scope.row.id)">详情
                        </el-button>
                        <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div style="margin-top: 10px" class="hidden-last-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    :background="true">
            </el-pagination>
        </div>

        <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
            <el-form label-position="right" label-width="100px">
                <el-form-item label="模板下载:" padding-top:10px>
                    <el-button type="primary" size="small" style="" @click="exportTemplate">题目列表</el-button>
                </el-form-item>
                <el-form-item label="文件" padding-top:-20px>
                    <el-upload :multiple="false"
                               :on-success="onUploadSuccess"
                               :on-error="onUploadError"
                               :action="'/api/question/importData'"
                               class="upload-demo">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import {ref} from 'vue'
    import request from "~/utils/request.js";
    import {serverIp} from "~/utils/config";

    export default {
        data() {
            return {
                serverIp: serverIp,
                dialogVisible: false,
                dialogImportVisible: false,
                tableData: [],
                courseOptions: [],
                searchCourseId: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                rules: [],
            }
        },
        created() {
            this.getCourseOptions()
            this.load()
        },
        methods: {
            importData() {
                this.dialogImportVisible = true;
            },
            exportData() {
                window.open(this.serverIp + '/api/question/export');
            },
            onUploadSuccess() {
                this.$message.success('上传成功');
                this.dialogImportVisible = false;
                location.reload();
            },
            onUploadError(){
                this.$message.error('上传失败');
            },
            // 模板下载
            exportTemplate() {
                window.location.href = '../../xlsx/questionList.xlsx'
            },
            load() {
                if(this.searchCourseId === undefined) {
                    this.searchCourseId = ''
                }
                request.get("/question/pageList?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&courseId=" + this.searchCourseId).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                // this.total = res.data[key];
                                if (this.searchCourseId !== null && this.searchCourseId !== "") {
                                    this.total = 25282
                                } else {
                                    this.total = 101142
                                }
                            }
                        }
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            getCourseOptions() {
                request.get("/course/all").then(res => {
                    this.courseOptions = res.data
                })
            },
            goToAbout(scope) {
                this.$router.push({path: "/question/questionDetail", query: {questionId: scope}});
            },
            // 删除
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/question/delete/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
        }
    }
</script>

<style scoped>
    /* 添加表格容器弹性布局 */
    .el-table {
        flex: 1;
    }

    /* 固定操作列宽度 */
    :deep(.fixed-column) {
        position: sticky;
        right: 0;
        background: white;
        z-index: 1;
    }

    /* 响应式处理 */
    @media screen and (max-width: 768px) {
        .el-table-column--selection :deep(.cell) {
            display: none;
        }
    }

    /* 文本溢出处理 */
    :deep(.el-table .cell) {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .el-button--small {
        CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
        border-radius: calc(var(--el-border-radius-base) - 1px);
        font-size: 12px;
        padding: 5px 11px;
        margin: 5px;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }

    .option-item {
        margin: 8px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .option-char {
        display: inline-block;
        width: 24px;
        color: #666;
    }

    .option-text {
        margin-left: 8px;
    }

    .correct-icon {
        color: #67C23A;
        margin-left: 10px;
    }

    .el-descriptions {
        margin: 20px 0;
    }

    .el-descriptions-item__label {
        font-weight: bold;
    }

    .el-tag {
        margin-right: 5px;
    }

    /* 隐藏最后一个页码 */
    .hidden-last-page /deep/ .el-pager .number:last-child {
        display: none !important;
    }

</style>
